<template>
  <div>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem"/>
  </div>
  <el-dialog v-model="trainOrExamVisible" :title="title" :before-close="handleClose">
    <div  v-loading="dialogLoading" style="padding: 0 20px 20px 20px">
      <div style="color: #303133; font-weight: 400;">
     <span>
       姓名：{{name}}
     </span>
        <span style="margin-left: 20px">
        工种：{{courseName}}
      </span>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;padding: 10px 0 20px 0">
        <el-table :data="trainOrExamData" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'left', 'background': '#fff', 'height': '44px' }"
            :cell-style="{ 'text-align': 'left', 'height': '44px' }"
        >
          <el-table-column
              v-if="type === 'practise'"
              prop="trainTime"
              label="练习时间">
          </el-table-column>
          <el-table-column
              v-if="type === 'practise'"
              prop="trainAnswerAmount"
              label="练习题数">
          </el-table-column>
          <el-table-column
              v-if="type === 'practise'"
              prop="markRate"
              label="得分率">
          </el-table-column>
          <el-table-column
              v-if="type === 'practise'"
              prop="trainCostTime"
              label="练习用时">
          </el-table-column>

          <el-table-column
              v-if="type === 'test'"
              prop="trainTime"
              label="测试时间">
          </el-table-column>
          <el-table-column
              v-if="type === 'test'"
              prop="mark"
              label="测试成绩">
          </el-table-column>
          <el-table-column
              v-if="type === 'test'"
              prop="trainCostTime"
              label="测试用时">
          </el-table-column>
        </el-table>
      </div>
      <div style="float: right" >
        <el-pagination v-model:current-page="pageDomain.pageNum" :page-size="pageDomain.pageSize" layout="prev, pager, next"
                       :total="pageDomain.total" @current-change="handleCurrentChange" />
      </div>
    </div>
    <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="trainOrExamVisible = false"> 确 定 </el-button>
                </span>
    </template>
  </el-dialog>
  <el-dialog v-model="loginLogVisible" title="登录日志" :before-close="handleClose">
    <div  v-loading="dialogLoading" style="padding: 0 20px 20px 20px">
      <div style="color: #303133; font-weight: 400;">
       <span>姓名：{{name}}</span>
       <span style="margin-left: 20px">工种：{{courseName}}</span>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;padding: 10px 0 20px 0">
        <el-table :data="loginData" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'center', 'background': '#fff', 'height': '44px' }"
            :cell-style="{ 'text-align': 'center', 'height': '44px' }">
          <el-table-column
              prop="loginTime"
              label="登录时间"
              width="">
          </el-table-column>
        </el-table>
      </div>
      <div style="float: right" >
        <el-pagination v-model:current-page="pageDomain.pageNum" :page-size="pageDomain.pageSize" layout="prev, pager, next"
                       :total="pageDomain.total" @current-change="handleCurrentChange" />
      </div>
    </div>
    <template #footer>
                <span class="dialog-footer" >
                    <el-button type="primary" @click="loginLogVisible = false"> 确 定 </el-button>
                </span>
    </template>
  </el-dialog>
</template>

<script setup>
import tablePaging from '@/views/common/component/table-paging'
import { onMounted, reactive, ref} from 'vue'
import {
  tableItem,
  operationItem, loginLogApi, trainDetailApi
} from './const.js'

import {ElMessage} from 'element-plus'
import { download } from "@/utils/request";
import {courseListApi} from '../student/const'
import {listAllListApi} from "../batch/const";
import {treeSubject} from "../../course/const";
const { proxy } = getCurrentInstance();
const loginLogVisible = ref(false);
const trainOrExamVisible = ref(false)
const dialogLoading=ref(false)
const name = ref('')
const courseName = ref('')
const studentId = ref('')
const courseId = ref('')
const loginData = ref([])
const pageDomain = reactive({
  total: 1,
  pageNum: 1,
  pageSize: 10,
})
const total = ref('')
const trainOrExamData = ref([])
const title = ref('');
const type = ref('');
const initPageDomain = () => {
  pageDomain.total = 1
  pageDomain.pageNum = 1
  pageDomain.pageSize = 10
}
const handleClose = () => {
  loginLogVisible.value = false;
  trainOrExamVisible.value = false
};

onMounted(() => {
  // setCourseListOptions()
  initPageDomain()
  initInstList()
  hideInstIfNotSystem()
  initTreeSubject()
})

const initInstList = () => {
  listAllListApi({ typeCodeList: ['institution','association'] }).then(res => {
    operationItem.SearchItem[2].options = res.data
  })
}

const initTreeSubject = () => {
  treeSubject({}).then(res=>{
    let searchItem = operationItem.SearchItem[1];
    searchItem.options = res.rows
    searchItem.props = {value: 'id', label: 'name', checkStrictly: true}
    searchItem.change = function(){
      let request = tableItem.pageInfo.request
      let subjectArray = request.subjectArray
      request.categoryId = ""
      request.subjectId = ""
      request.courseId = ""
      if (subjectArray){
        if (subjectArray.length == 1) {
          request.subjectId = subjectArray[0]
        }
        if (subjectArray.length == 2) {
          request.categoryId = subjectArray[1]
        }
        if (subjectArray.length == 3) {
          request.courseId = subjectArray[2]
        }
      }

    }
  })
}
// 搜索
operationItem.menuArray[0].handle = () => {
  clickSearch()
}
// 导出
operationItem.menuArray[1].handle = () => {
  clickExport()
}
//登录日志
tableItem.btnArray[0].handle = (row) => {
  clickLoginLog(row)
}
//练习详情
tableItem.btnArray[1].handle = (row) => {
  clickTrainOrExamDetail(row,'practise')
}
//测试详情
tableItem.btnArray[2].handle = (row) => {
  clickTrainOrExamDetail(row,'test')
}

function setCourseListOptions() {
  let dataRequest = {
    levelNum: 3,
    parentId: '',
    disableFlag: 0
  }
  courseListApi(dataRequest).then(res => {
    operationItem.SearchItem[1].options = res.rows.map(item => ({ label: item.name, value: item.id }))
  })
}

function clickSearch() {
  tableItem.pageInfo.paging()
}
function clickExport() {
  let url = '/train/count/export'
  let fileName = '练习统计表'
  download(url, tableItem.pageInfo.request, fileName, {}, {})
}

function handleCurrentChange(val) {
  pageDomain.pageNum = val
  getStudentDataDetail(studentId.value, courseId.value, 'login')
}

function clickLoginLog(row) {
  initPageDomain()
  loginLogVisible.value = true
  name.value = row.studentName
  courseName.value = row.courseName
  studentId.value = row.studentId
  courseId.value = row.courseId
  getStudentDataDetail(studentId.value, courseId.value, 'login')
}

function clickTrainOrExamDetail(row, param) {
  initPageDomain()
  trainOrExamVisible.value = true
  name.value = row.studentName
  courseName.value = row.courseName
  studentId.value = row.studentId
  courseId.value = row.courseId
  type.value = param
  if(param === 'practise') {
    title.value = '练习详情'
    getStudentDataDetail(studentId.value, courseId.value, 'practise')
  } else if(param === 'test') {
    title.value = '测试详情'
    getStudentDataDetail(studentId.value, courseId.value, 'test')
  }
}

function getStudentDataDetail(studentId, courseId, typeCode) {
  let dataRequest = {
    studentId: studentId,
    courseId: courseId,
    pageDomain: {
      pageNum: pageDomain.pageNum,
      pageSize: "10",
      orderByColumn: "",
      isAsc: "",
      reasonable: ""
    }
  }
  dialogLoading.value=true
  if(typeCode === 'login') {
    loginLogApi(dataRequest).then(res => {
      loginData.value = res.rows
      pageDomain.total = res.total
      dialogLoading.value=!true
    })
  } else if(typeCode === 'practise') {
    dataRequest.typeCode = 'practise'
    trainDetailApi(dataRequest).then(res => {
      trainOrExamData.value = res.rows
      pageDomain.total = res.total
      dialogLoading.value=!true
    })
  } else if(typeCode === 'test') {
    dataRequest.typeCode = 'test'
    trainDetailApi(dataRequest).then(res => {
      trainOrExamData.value = res.rows
      pageDomain.total = res.total
      dialogLoading.value=!true
    })
  }
}

function hideInstIfNotSystem() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  if (userInfo) {
    // 机构institution 协会association 企业enterprise
    //企业不显示机构
    if (userInfo.typeCode != 'admin') {
      operationItem.SearchItem[2].type = '9999'
      // tableItem.column[2].width = 0
      tableItem.column = tableItem.column.filter( (column) => {
        if (column.label == "所属机构") {
          return false
        } else {
          return true
        }
      })
    }
  }
}

</script>

<style>
.el-dialog__footer {

}

</style>
